<template>
  <div class="main">
    <el-row gutter="20">

      <!--左侧导航栏 -->
      <el-col span="3">
        <el-menu class="el-menu-vertical-demo"
                 text-color="rgb(39,137,150)">
          <el-menu-item index="1">
            <a style="color: rgb(39,137,150)"><span slot="title">我的发票</span></a>
          </el-menu-item>
          <el-menu-item index="2">
            <a href="javascript:void(0)" @click="goToOrder" style="color: rgb(39,137,150)"><span slot="title">我的订单</span></a>
          </el-menu-item>
        </el-menu>
      </el-col>

      <el-col span="21">
        <el-card>
          <el-input placeholder="请输入产品信息"  class="input-with-select" v-model="keyword" @keydown.native.enter="searchInvoice()">
            <el-button slot="append" icon="el-icon-search" @click="searchInvoice()"></el-button>
          </el-input>

          <el-table :data="invoiceList" height="250" border style="width: 100%">
            <el-table-column prop="id" label="ID" width="60" align="center"></el-table-column>
            <el-table-column prop="subject" label="产品名称" width="200" align="center"></el-table-column>
            <el-table-column prop="title" label="抬头" width="200" align="center"></el-table-column>
            <el-table-column prop="taxNumber" label="税号" width="200" align="center"></el-table-column>
            <el-table-column prop="address" label="地址" width="150" align="center"></el-table-column>
            <el-table-column prop="phone" label="电话" width="120" align="center"></el-table-column>
            <el-table-column prop="content" label="发票内容" width="60" align="center"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="150" align="center"></el-table-column>
            <el-table-column label="状态" width="100" align="center" fixed="right">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status=='APPLYING'">申请中</el-tag>
                <el-tag v-if="scope.row.status=='APPROVED'" type="success">已通过</el-tag>
                <el-tag v-if="scope.row.status=='FAILED'" type="danger">未通过</el-tag>
              </template>
            </el-table-column>

          </el-table>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "InvoiceList",
  data() {
    return {
      keyword:'',
      invoiceList: [],
    }
  },
  methods:{
    searchInvoice(){
      this.axios
          .create({"headers":{"Authorization":localStorage.getItem("localJwt")}})
          .get("http://localhost:8080/v1/invoices/search?keyword="+this.keyword).then((response)=>{
        if(response.data.code==1){
          this.invoiceList=response.data.data;
        }
      })
    },
    loadInvoiceList(){
      this.axios
          .create({"headers":{"Authorization":localStorage.getItem("localJwt")}})
          .get("http://localhost:8080/v1/invoices/").then((response)=>{
        if(response.data.code==1){
          this.invoiceList=response.data.data;
        }
      })
    },
    goToOrder() {
      if (location.href == 'http://localhost:9090/order') {
        location.reload();
        return;
      }
      this.$router.push('/order');
    },
  },
  created() {
    if(!localStorage.getItem("id")) {
      this.$message.error("请先登录")
      setTimeout(() => {
        history.back()
      }, 1000)
    }
    this.loadInvoiceList();
  }
}
</script>

<style scoped>
.main{
  width: 1200px;
  margin: 0 auto;
}
</style>